<template>
  <div class="wrap hotspotDetail">
    <div class="main">
      <h3>{{ detail.title }}</h3>
      <p>{{ detail.text }}</p>
      <img :src="detail.img" alt="" />
    </div>
  </div>
</template>

<script>
import { HotspotDetail } from "../api/api";
export default {
  // 定义属性
  name: "HotspotDetail",
  data() {
    return {
      detail: {},
    };
  },
  methods: {
    getDetail() {
      HotspotDetail({ id: this.$route.query.id }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.detail = res.data;
          console.log(this.detail);
        }
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log("接收id", this.$route.query.id);
    this.getDetail();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss" scoped>
.hotspotDetail {
  .main {
    padding: 20px;
    h3{
        font-weight: bold;
        margin-bottom: 10px;
    }
    p {
      text-indent: 2em;
      line-height: 36px;
    }
    img{
        width: 320px;
        height: 240px;
        margin: 10px 0;
    }
  }
}
</style>
